<template>
	<view class="trial">
		<AppNavbar :bgColor="'transparent'" titlecolor="black" :fontWeight="600"></AppNavbar>
		<up-modal :show="show" :content='content' contentTextAlign="center" width="450rpx">
			<template #confirmButton>

				<view class="trial-button">
					<view class="trial-button-go" @click="toVip">
						Go subscribe
					</view>
					<view class="trial-button-ok" @click="back">
						OK
					</view>
				</view>
			</template>
		</up-modal>

	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';

	// 使用 ref 创建响应式数据  
	const show = ref(false);
	const title = ref('标题');
	const content = ref('The trial is over, please go to the album to view');
	const toVip = () => {
		uni.$to("/pages/Vip/VipCenter")
	}
	onLoad(() => {
		show.value = true
	})
	const back = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.trial {
		width: 100vw;
		height: 100vh;
		background-image: url('/static/image/homePage.png');
		background-position: center center;
		background-size: cover;

		.trial-button {
			display: flex;
			flex-direction: column;
			align-items: center;

			.trial-button-go {
				width: 500rpx;
				text-align: center;
				border-top: 1px solid #e4e4e3;
				padding: 15rpx 0;
				color: #51a0f9;
				font-weight: 600;
			}

			.trial-button-ok {
				position: relative;
				top: 5rpx;
				box-sizing: border-box;
				width: 500rpx;
				text-align: center;
				border-top: 1px solid #e4e4e3;
				padding-top: 15rpx;
				color: #9a9a9a;
				font-weight: 600;
			}
		}
	}

	::v-deep .u-modal__content__text span {
		// width: 500rpx !important;
		color: #000;
		font-weight: 600;
		font-size: 28rpx;
	}
</style>